<template>
	<view class="chartsBox">
		<view class="chartsTitle">
			<h4>成交订单分布</h4>
		</view>

		<uni-datetime-picker ref="datetimePicker" :clear-icon="false" v-model="timeSelect" type="daterange"
			@change="datetimePickerChange" />

		<view class="chartsMain" :style="{ height: chartsBoxHeight + 'rpx' }">
			<view class="charts-box">
				<qiun-data-charts type="radar" :tooltipCustom="{textList:tooltipCustomArray}" :opts="opts"
					:chartData="chartData" ref="chartRef" />
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		defineProps,
		watch
	} from 'vue';

	import {
		onShow
	} from '@dcloudio/uni-app'

	import {
		homeGetProductCount,
		phoneStaGetBusinessPartnerProductCount,
		phoneStaGetDutyProductCount,
		phoneStaGetUserProductCount
	} from '../../../utils/data';

	let datetimePicker = ref(null)

	let chartsBoxHeight = ref(null)

	const props = defineProps({
		staffOrPartnerSelect: Number
	})


	//日期选择器绑定的值
	let timeSelect = ref([])

	// =======================让日期选择器 初始值为： 本月的1号-本月的今天=======================//
	let getCurrentDate = () => {
		const dateObj = new Date();
		const year = dateObj.getFullYear(); // 获取当前年份
		const month = ("0" + (dateObj.getMonth() + 1)).slice(-2); // 获取当前月份，其中需要将月份加1，因为月份是从0开始计数的
		const day = ("0" + dateObj.getDate()).slice(-2); // 获取当前日期
		const timeSelectFirst = `${year}-${month}-01`
		const timeSelectSecond = `${year}-${month}-${day}`; // 格式化日期
		timeSelect.value = [null, null]
		timeSelect.value = [timeSelectFirst, timeSelectSecond]
	}
	getCurrentDate()


	//日期选择器发生改变时
	let datetimePickerChange = (e) => {

		getServerData()
	}

	// =============================获取图表实例============================/
	const chartRef = ref(null)

	let tooltipCustomArray = ref([])

	let chartData = ref({
		categories: [],
		series: []
	});
	let opts = reactive({
		timing: "easeOut",
		duration: 1000,
		rotate: false,
		rotateLock: false,
		color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
		padding: [0, 0, 0, 0],
		fontSize: 9,
		// fontColor: "#666666",
		fontColor: "#1890FF",
		dataLabel: true,
		dataPointShape: true,
		dataPointShapeType: "solid",
		touchMoveLimit: 60,
		enableScroll: false,
		enableMarkLine: false,
		legend: {
			show: false,
			position: "right",
			lineHeight: 25,
			float: "center",
			padding: 5,
			margin: 5,
			backgroundColor: "rgba(0,0,0,0)",
			borderColor: "rgba(0,0,0,0)",
			borderWidth: 0,
			fontSize: 13,
			fontColor: "#666666",
			hiddenColor: "#CECECE",
			itemGap: 10
		},
		extra: {
			radar: {
				gridType: "circle",
				gridColor: "#CCCCCC",
				gridCount: 5,
				opacity: 0.2,
				max: 5,
				labelShow: true,
				gridEval: 0,
				radius: 60,
				axisLabel: false,
				axisLabelTofix: 0,
				labelColor: "#666666",
				labelPointShow: false,
				labelPointRadius: 3,
				labelPointColor: "#CCCCCC",
				border: true,
				borderWidth: 2,
				linearType: "none"
			},
			tooltip: {
				showBox: true,
				showArrow: true,
				showCategory: false,
				borderWidth: 0,
				borderRadius: 0,
				borderColor: "#000000",
				borderOpacity: 0.7,
				bgColor: "#000000",
				bgOpacity: 0.7,
				gridType: "solid",
				dashLength: 4,
				gridColor: "#CCCCCC",
				boxPadding: 3,
				fontSize: 10,
				lineHeight: 11,
				fontColor: "#FFFFFF",
				legendShow: false,
				legendShape: "auto",
				splitLine: true,
				horizentalLine: false,
				xAxisLabel: false,
				yAxisLabel: false,
				labelBgColor: "#FFFFFF",
				labelBgOpacity: 0.7,
				labelFontColor: "#666666"
			}
		}
	})

	// 名称
	const nameArray = ref([])
	// 数据
	const dataArray = ref([])


	let getServerData = () => {
		//获取登录账号的businessId
		let userinfo = JSON.parse(uni.getStorageSync('userinfo'))
		let businessId = userinfo.businessId
		let roleAuthority = userinfo.roleAuthority

		//如果登录角色是合伙人或者门店员工
		if (roleAuthority == 'partner' || roleAuthority == 'StoreStaff') {
			chartsBoxHeight.value = 450
			phoneStaGetUserProductCount('/phoneSta/getUserProductCount', {
				beginTime: timeSelect.value[0],
				endTime: timeSelect.value[1],
			}).then((res) => {
				successfullyConnected(res)
			})
		} //如果登录角色是店长并且选择了员工数据
		else if (roleAuthority == 'StoreManager' && props.staffOrPartnerSelect == 0) {
			chartsBoxHeight.value = 450
			homeGetProductCount('/home/getProductCount', {
				beginTime: timeSelect.value[0],
				endTime: timeSelect.value[1],
				businessId: businessId,
			}).then((res) => {
				successfullyConnected(res)
			})
		} //如果登录角色是店长并且选择了合伙人数据
		else if (roleAuthority == 'StoreManager' && props.staffOrPartnerSelect == 1) {
			chartsBoxHeight.value = 450
			phoneStaGetBusinessPartnerProductCount('/phoneSta/getBusinessPartnerProductCount', {
				beginTime: timeSelect.value[0],
				endTime: timeSelect.value[1],
			}).then((res) => {
				successfullyConnected(res)
			})
		} //如果登录角色是负责人
		else if (roleAuthority == 'StoreDuty') {
			chartsBoxHeight.value = 900
			phoneStaGetDutyProductCount('/phoneSta/getDutyProductCount', {
				beginTime: timeSelect.value[0],
				endTime: timeSelect.value[1],
			}).then((res) => {
				successfullyConnected(res)
			})
		}
	}

	//走接口，成功返回后，给变量赋值
	let successfullyConnected = (res) => {
		if (res.code == 200) {
			dataArray.value = []
			nameArray.value = []
			let dataMax = ref(0)
			for (let i = 0; i < res.data.length; i++) {
				nameArray.value.push(res.data[i].productName)
				dataArray.value.push(res.data[i].count)
				if (dataMax.value < res.data[i].count) {
					dataMax.value = res.data[i].count
				}
			}

			//给tooltipCustomArray赋值
			tooltipCustomArray.value = []
			for (var i = 0; i < dataArray.value.length; i++) {
				tooltipCustomArray.value.push({
					text: nameArray.value[i] + ':' + dataArray.value[i],
				})
			}

			//设置雷达图的最大范围为 最大的数据+1
			opts.extra.radar.max = dataMax.value + 1
			let result = {
				categories: nameArray.value,
				series: [{
						name: "成交量",
						data: dataArray.value
					},

				],
			};


			chartData.value = JSON.parse(JSON.stringify(result));
		}
	}



	// onMounted(() => {

	// getServerData()
	// })

	onShow(() => {
		
		if (datetimePicker.value) {
			datetimePicker.value.clear()
		}
		getCurrentDate()
		getServerData()
	})

	watch(() => props.staffOrPartnerSelect, (newCount, oldCount) => {
		if (datetimePicker.value) {
			datetimePicker.value.clear()
		}
		//时间选择复原
		getCurrentDate()
		//图表数据复原
		getServerData()

	})
</script>

<style lang="scss" scoped>
	.chartsBox {
		width: 688rpx;
		// height: 515rpx;
		padding: 18rpx;
		background: white;
		margin: 14rpx 0;

		.chartsTitle {
			width: 100%;
			height: 46rpx;
			margin-bottom: 14rpx;

		}

		.chartsMain {
			width: 100%;
			height: 450rpx;


			// background-color: #bfa;
			/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
			.charts-box {
				width: 100%;
				height: 100%;
			}

		}
	}
</style>